<template>
    <div class="flex items-center bg-page rounded-[12px] p-[13px]">
        <div class="flex items-center w-[200px] h-[55px] cursor-pointer">
            <template v-if="currentMusic.title">
                <img
                    :src="currentMusic.cover_url"
                    class="w-[55px] h-full rounded-[8px]"
                    alt=""
                />
                <div class="flex-1 min-w-0 ml-[15px]">
                    <div class="font-bold line-clamp-1">
                        {{ currentMusic.title }}
                    </div>
                    <div
                        v-if="currentMusic.tags"
                        class="line-clamp-1 text-tx-secondary text-sm mt-1"
                    >
                        {{ currentMusic?.tags }}
                    </div>
                </div>
            </template>
        </div>

        <div class="mx-[20px] flex items-center">
            <div class="text-tx-regular">
                <el-button
                    link
                    :disabled="currentId <= 0 || currentMusic.index <= 0"
                    @click="prevOrNext(-1)"
                >
                    <template #icon>
                        <icon name="svg-icon-PlayPrev" :size="24" />
                    </template>
                </el-button>
            </div>

            <div class="mx-[20px]">
                <el-button
                    type="primary"
                    circle
                    :disabled="currentId <= 0"
                    @click="_togglePlay"
                >
                    <template #icon>
                        <icon v-if="_playing" name="svg-icon-Pause" :size="14" />
                        <icon v-else name="svg-icon-Play" :size="14" />
                    </template>
                </el-button>
            </div>

            <div class="text-tx-regular">
                <el-button
                    link
                    :disabled="
                        currentId <= 0 ||
                            currentMusic.index >= musicList.length - 1
                    "
                    @click="prevOrNext(1)"
                >
                    <template #icon>
                        <icon name="svg-icon-PlayNext" :size="24" />
                    </template>
                </el-button>
            </div>
        </div>

        <div class="flex items-center text-tx-secondary mx-[30px]">
            <div class="w-[50px]">{{ currentTimeTrans }}</div>
            <div class="w-[250px] mx-[20px]">
                <el-slider
                    :model-value="currentTime"
                    :disabled="!currentMusic.audio_url"
                    :show-tooltip="false"
                    :max="duration"
                    :min="0"
                    size="small"
                    @input="setCurrentTime"
                />
            </div>
            <div class="w-[50px]">{{ durationTrans }}</div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { useMusicPlay } from '../hooks/useMusicPlay'

const {
    playing: _playing,
    duration,
    musicList,
    currentId,
    currentTime,
    currentMusic,
    durationTrans,
    currentTimeTrans,
    togglePlay: _togglePlay,
    prevOrNext,
    setCurrentTime,
} = useMusicPlay()
</script>
